<template>
  <div style="min-height: 630px; background-color: rgba(255, 255, 255, 1)">
    <row>
      <div class="toolbar">
        <Button
          icon="ios-add"
          type="primary"
          @click="toAddPlugin"
          style="margin-right: 30px"
          v-if="Validation.check(Resources.SELF_MOTION_ADD)"
          >新增模式
        </Button>
        <Input
          v-model="bloc.model.accountName"
          style="width: 200px; margin-right: 5px"
          placeholder="发布人"
        />
        <!--        <Select v-model="bloc.model.versions" style="width:200px;margin-right:5px" placeholder="模式版本" clearable>-->
        <!--          <Option v-for="item in bloc.versions" :value="item.version" :key="item.index">{{ item.version }}</Option>-->
        <!--        </Select>-->
        <Select
          v-model="bloc.model.issueStatus"
          style="width: 200px; margin-right: 5px"
          placeholder="发布状态"
          clearable
        >
          <Option
            v-for="(item, index) in publishStatusList"
            :value="index"
            :key="item"
            >{{ item }}</Option
          >
        </Select>
        <Button
          icon="ios-search"
          type="primary"
          style="margin-right: 5px"
          @click="
            bloc.getSeftMotion(
              bloc.seftMotion.pageIndex,
              bloc.seftMotion.pageSize,
              'DESC',
              bloc.model
            )
          "
        >
          查询
        </Button>
        <Button icon="ios-refresh" @click="reset">重置</Button>
      </div>
    </row>
    <div>
      <Table
        border
        ref="selection"
        :columns="columns4"
        :data="bloc.seftMotion.items"
      >
        <template slot-scope="{ row }" slot="action">
          <div style="white-space: nowrap">
            <Button
              size="small"
              @click="toModifyItem(row.id)"
              type="info"
              v-if="Validation.check(Resources.SELF_MOTION_UPDATE)"
            >
              编辑
            </Button>
            <Button
              size="small"
              @click="toRemoveItem(row)"
              type="warning"
              v-if="Validation.check(Resources.SELF_MOTION_DELETE)"
            >
              删除
            </Button>
          </div>
        </template>
        <slot name="footer" slot="footer">
          <Page
            show-elevator
            show-total
            show-sizer
            :total="bloc.seftMotion.itemCount"
            :current="bloc.seftMotion.pageIndex"
            :page-size="bloc.seftMotion.pageSize"
            :page-size-opts="[15, 30, 50, 100]"
            @on-change="
              (val) =>
                bloc.getSeftMotion(
                  val,
                  bloc.seftMotion.pageSize,
                  'DESC',
                  bloc.model
                )
            "
            @on-page-size-change="
              (val) => {
                bloc.seftMotion.pageSize = val;
                bloc.getSeftMotion(1, val, 'DESC', bloc.model);
              }
            "
          />
        </slot>
      </Table>
    </div>
    <!--    <div style="margin-top:20px">-->
    <!--      &lt;!&ndash;      <Button @click="handleSelectAll(true)">全选</Button>&ndash;&gt;-->
    <!--      &lt;!&ndash;      <Button @click="handleSelectAll(false)">反选</Button>&ndash;&gt;-->
    <!--      <div style="float:right">-->
    <!--        <Page-->
    <!--          :page-size="bloc.seftMotion.pageSize"-->
    <!--          :total="bloc.seftMotion.itemCount"-->
    <!--          @on-change="val=>bloc.getSeftMotion(val, bloc.seftMotion.pageSize,'DESC', bloc.model)"-->
    <!--          @on-page-size-change="val=>bloc.getSeftMotion(bloc.seftMotion.pageIndex, val,'DESC', bloc.model)"-->
    <!--          show-sizer-->
    <!--        />-->
    <!--      </div>-->
    <!--    </div>-->

    <Modal
      title="确认提示"
      v-model="deleteConfirm"
      class-name="vertical-center-modal"
      @on-ok="removeItem(row)"
    >
      <div>
        <span>
          <h2>
            <Icon
              type="ios-help-circle-outline"
              size="48"
              color="rgba(255, 209, 145, 1)"
            />是否确定删除对应的记录
          </h2>
        </span>
        <p style="margin-left: 45px">是否确定删除对应的记录</p>
      </div>
    </Modal>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { AutomaticBloc } from "./AutomaticBloc";
import { SeftMotion } from "@/base/model/SeftMotion";
import { Validation } from "@/base/Validation";
import { Resources } from "@/base/Resources";
import { formatDate } from "@/base/util/Dates";

@Component({
  components: {},
})
export default class extends Vue {
  @Prop({ type: Number })
  readonly init!: number;
  Validation = Validation;
  Resources = Resources;
  bloc = new AutomaticBloc();
  deleteConfirm: boolean = false;
  model1: any = "";
  model2: any = "";
  publisher: any = "";
  cityList: any = {
    1: "广州",
    2: "上海",
    3: "北京",
    4: "深圳",
    5: "杭州",
  };
  publishStatusList: any = {
    NOT_ISSUE: "未发布",
    ISSUE: "已发布",
  };
  columns4: any = [
    {
      type: "selection",
      width: 60,
      align: "left",
      tooltip: true,
    },
    // {
    //   title: 'ID',
    //   key: 'id',
    //   align: 'left'
    // },
    {
      title: "模式名称",
      key: "modeName",
      align: "left",
      tooltip: true,
    },
    {
      title: "模式图标",
      key: "iconUrl",
      align: "left",
      render: (h: any, params: any) => {
        return h("div", [
          h("img", {
            domProps: {
              src: params.row.iconUrl,
            },
            style: {
              width: "50px",
              height: "50px",
            },
          }),
        ]);
      },
      tooltip: true,
    },
    {
      title: "模式编号",
      key: "sn",
      align: "left",
      tooltip: true,
    },
    // {
    //   title: '模式版本',
    //   key: 'versions',
    //   align: 'left',
    //   tooltip: true
    // },
    {
      title: "发布人",
      key: "accountName",
      align: "left",
      tooltip: true,
    },
    {
      title: "发布状态",
      key: "issueStatus",
      align: "left",
      render: (h: any, params: any) => {
        return h("div", [
          h(
            "i-switch",
            {
              props: {
                type: "primary",
                size: "small",
                title: "状态",
                // disabled:(!params.row.status),
                value: params.row.issueStatus === "ISSUE",
                ISSUE: 1,
                NOT_ISSUE: 0,
              },
              style: {
                marginRight: "2px",
                display: params.row.issueStatus === undefined ? "none" : "",
              },
              on: {
                "on-change": (value) => {
                  this.switchStatus(params.row.id, value, params.index);
                },
              },
            },
            "selected"
          ),
        ]);
      },
      tooltip: true,
      width: 80,
    },
    {
      title: "更新时间",
      key: "updated",
      align: "left",
      tooltip: true,
      width: 160,
      render: (h: any, params: any) => {
        return h("span", {
          domProps: {
            innerText: formatDate(
              new Date(params.row.updated),
              "yyyy-MM-dd hh:mm:ss"
            ),
          },
        });
      },
    },
    {
      title: "添加时间",
      key: "created",
      align: "left",
      tooltip: true,
      width: 160,
      render: (h: any, params: any) => {
        return h("span", {
          domProps: {
            innerText: formatDate(
              new Date(params.row.created),
              "yyyy-MM-dd hh:mm:ss"
            ),
          },
        });
      },
    },
    {
      title: "操作",
      key: "action",
      width: 47 * 2 + 61 * 0 + 75 * 0 + 20,
      align: "left",
      slot: "action",
      fixed: "right",
    },
  ];

  private row: any;

  switchStatus(id, value, index) {
    this.bloc.toModifyItem(id).then((res) => {
      if (value) {
        this.bloc.seftMotionId.issueStatus = "ISSUE";
      } else {
        this.bloc.seftMotionId.issueStatus = "NOT_ISSUE";
      }
      this.bloc
        .modifyItem(
          this.bloc.seftMotionId.describe,
          this.bloc.seftMotionId.describeEn,
          this.bloc.seftMotionId.iconUrl,
          this.bloc.seftMotionId.selectedIconUrl,
          this.bloc.seftMotionId.backgroundUrl,
          this.bloc.seftMotionId.appUrl,
          this.bloc.seftMotionId.id,
          this.bloc.seftMotionId.issueStatus,
          this.bloc.seftMotionId.modeName,
          this.bloc.seftMotionId.modeNameEn,
          this.bloc.seftMotionId.sn,
          this.bloc.seftMotionId.modelId,
          this.bloc.seftMotionId.sortId,
          this.bloc.seftMotionId.url,
          this.bloc.seftMotionId.classification
        )
        .then((res) => {
          this.bloc.seftMotionId = new SeftMotion();
        });
    });
  }

  toAddPlugin() {
    this.$router.push({
      path: "/device/nav/add/automatic/",
      query: { id: this.$route.params.id, sortId: this.$route.query.sortId },
    });
  }

  toModifyItem(id) {
    this.$router.push({
      path: "/device/nav/edit/automatic/" + id,
      query: { id: this.$route.params.id, sortId: this.$route.query.sortId },
    });
  }

  toRemoveItem(row) {
    // this.deleteConfirm = true;
    this.row = row;
    this.$Modal.confirm({
      title: "提示",
      content: "确认删除后将无法恢复！还要继续吗？",
      okText: "删除",
      cancelText: "取消",
      onOk: () => {
        this.bloc.removeItem(row).then((res) => {
          if (res.name === "") {
            this.$Message.success("模式删除成功");
          } else {
            this.$Message.error("模式删除失败");
          }
        });
      },
    });
  }

  removeItem(row) {}

  reset() {
    this.bloc.model = {
      accountId: 0,
      accountName: "",
      created: "",
      describe: "",
      describeEn:"",
      iconUrl: "",
      id: 0,
      issueStatus: "",
      modeName: "",
      modeNameEn: "",
      sn: "",
      modelId: this.bloc.model.modelId,
      sortId: 0,
      updated: "",
      url: "",
      versions: "",
    };
    this.bloc.getSeftMotion(
      this.bloc.seftMotion.pageIndex,
      this.bloc.seftMotion.pageSize,
      "DESC",
      this.bloc.model
    );
  }

  @Watch("edit")
  nameChanged(newVal: string, oldVal: string) {}

  handleSelectAll(status) {
    let el: any = this.$refs.selection;
    el.selectAll(status);
  }

  activated() {
    this.bloc.model.modelId = Number(this.$route.params.id);
    this.bloc.getSeftMotion(
      this.bloc.seftMotion.pageIndex,
      this.bloc.seftMotion.pageSize,
      "DESC",
      this.bloc.model
    );
    // this.bloc.getVersions()
  }

  // beforeRouteUpdate(to: any, from: any, next: any) {
  //   if (to.query.id) {
  //     // this.isALL = false;
  //     this.bloc.model.modelId = to.params.id;
  //     this.bloc.getSeftMotion(this.bloc.seftMotion.pageIndex, this.bloc.seftMotion.pageSize, 'DESC', this.bloc.model)
  //   }
  //   next();
  // }
}
</script>
<style lang="less" scoped></style>
